<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>自由行-首页</title>
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<link rel="stylesheet" href="css/swiper.min.css">
	<link rel="stylesheet" href="css/font.css">
	<link rel="stylesheet" href="css/top.css">
	<link rel="stylesheet" href="css/home-pic.css">
	<link rel="stylesheet" href="css/fot.css">
	<link rel="stylesheet" href="css/home.css">
</head>
<body>
<div id="wrap">
	<div id="top-fixed">
		<div id="top" class="top">
            <span class="posi-re">中国联通
            	<i class="posi-ab">4G</i>
            	<i class="icon iconfont icon-xinhao"></i>
            </span>
			<time class="top-time">00:00</time>
            <span>100%<i class="icon iconfont">&#xe697;</i></span>
		</div>
	</div>
	<div class="content">
		<div class="cont-top">
			<div class="logo">
				<a href="#">
					<img src="images/logo.png" alt="">
				</a>
			</div>
			<div class="swiper-container">
				<div class="swiper-wrapper">
					<div class="swiper-slide" style="background-image:url(images/home-bg.jpg)">
						<div class="slide-txt">
							<h3 class="title">让旅行定格青春<br>使青春无怨无悔</h3>
							<a href="#" class="btn">查看集合</a>
						</div>
					</div>
					<div class="swiper-slide" style="background-image:url(images/home-bg1.jpg)">
						<div class="slide-txt">
							<h3 class="title">訫凉日本夏日祭<br>感受樱花树下的浪漫</h3>
						</div>
					</div>
					<div class="swiper-slide" style="background-image:url(images/home-bg2.jpg)">
						<div class="slide-txt">
							<h3 class="title">感受非洲动物盛宴<br>与野性自然比邻而居</h3>
						</div>
					</div>
				</div>
				<!-- Add Pagination -->
				<div class="swiper-pagination swiper-pagination-white"></div>
			</div>
		</div>
		

		<div class="main-inner">
			<form action="" method="post" class="search">
				<input type="text" placeholder="搜索" class="ipt-search">
			</form>



			<div class="main-content">
				<div class="swiper-container">
					<div class="swiper-pagination">
					</div>
					<a href="#" class="swiper-link">写游记</a>
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<ul class="list">
								<li class="list-box">
									<a href="#" class="list-img">
										<img src="images/list-bg.jpg" alt="">
									</a>
									<div class="list-txt">
										<h3 class="title">波兰的小众秘境，下西里西亚省的城堡美食之旅</h3>
										<p>去年的圣诞季，我在 波兰 的 华沙 、托伦、 波兹南 和 格但斯克 ，不期而遇一场大雪，装点着圣诞集市如童话般梦幻。印象里的 波兰 是霜色的雪，丹色的城，黛蓝的夜。 ...</p>
										<span class="icon-place list-icon"><i class="icon iconfont">&#xe625;</i>波兰</span><span class="icon-browse list-icon"><i class="icon iconfont">&#xe7a1;</i>575/23</span>
									</div>
								</li>
								<li class="list-box">
									<a href="#" class="list-img">
										<img src="images/list-bg2.jpg" alt="">
									</a>
									<div class="list-txt">
										<h3 class="title">波兰的小众秘境，下西里西亚省的城堡美食之旅</h3>
										<p>去年的圣诞季，我在 波兰 的 华沙 、托伦、 波兹南 和 格但斯克 ，不期而遇一场大雪，装点着圣诞集市如童话般梦幻。印象里的 波兰 是霜色的雪，丹色的城，黛蓝的夜。 ...</p>
										<span class="icon-place list-icon"><i class="icon iconfont">&#xe625;</i>波兰</span><span class="icon-browse list-icon"><i class="icon iconfont">&#xe7a1;</i>575/23</span>
									</div>
								</li>
								<li class="list-box">
									<a href="#" class="list-img">
										<img src="images/list-bg3.jpg" alt="">
									</a>
									<div class="list-txt">
										<h3 class="title">波兰的小众秘境，下西里西亚省的城堡美食之旅</h3>
										<p>去年的圣诞季，我在 波兰 的 华沙 、托伦、 波兹南 和 格但斯克 ，不期而遇一场大雪，装点着圣诞集市如童话般梦幻。印象里的 波兰 是霜色的雪，丹色的城，黛蓝的夜。 ...</p>
										<span class="icon-place list-icon"><i class="icon iconfont">&#xe625;</i>波兰</span><span class="icon-browse list-icon"><i class="icon iconfont">&#xe7a1;</i>575/23</span>
									</div>
								</li>
							</ul>
						</div>
						<div class="swiper-slide">
							<ul class="list">
								<li class="list-box">
									<a href="#" class="list-img">
										<img src="images/list-bg4.jpg" alt="">
									</a>
									<div class="list-txt">
										<h3 class="title">波兰的小众秘境，下西里西亚省的城堡美食之旅</h3>
										<p>去年的圣诞季，我在 波兰 的 华沙 、托伦、 波兹南 和 格但斯克 ，不期而遇一场大雪，装点着圣诞集市如童话般梦幻。印象里的 波兰 是霜色的雪，丹色的城，黛蓝的夜。 ...</p>
										<span class="icon-place list-icon"><i class="icon iconfont">&#xe625;</i>波兰</span><span class="icon-browse list-icon"><i class="icon iconfont">&#xe7a1;</i>575/23</span>
									</div>
								</li>
								<li class="list-box">
									<a href="#" class="list-img">
										<img src="images/list-bg5.jpg" alt="">
									</a>
									<div class="list-txt">
										<h3 class="title">波兰的小众秘境，下西里西亚省的城堡美食之旅</h3>
										<p>去年的圣诞季，我在 波兰 的 华沙 、托伦、 波兹南 和 格但斯克 ，不期而遇一场大雪，装点着圣诞集市如童话般梦幻。印象里的 波兰 是霜色的雪，丹色的城，黛蓝的夜。 ...</p>
										<span class="icon-place list-icon"><i class="icon iconfont">&#xe625;</i>波兰</span><span class="icon-browse list-icon"><i class="icon iconfont">&#xe7a1;</i>575/23</span>
									</div>
								</li>
								<li class="list-box">
									<a href="#" class="list-img">
										<img src="images/list-bg6.jpg" alt="">
									</a>
									<div class="list-txt">
										<h3 class="title">波兰的小众秘境，下西里西亚省的城堡美食之旅</h3>
										<p>去年的圣诞季，我在 波兰 的 华沙 、托伦、 波兹南 和 格但斯克 ，不期而遇一场大雪，装点着圣诞集市如童话般梦幻。印象里的 波兰 是霜色的雪，丹色的城，黛蓝的夜。 ...</p>
										<span class="icon-place list-icon"><i class="icon iconfont">&#xe625;</i>波兰</span><span class="icon-browse list-icon"><i class="icon iconfont">&#xe7a1;</i>575/23</span>
									</div>
								</li>
							</ul>
						</div>
					</div>
					<!-- Add Pagination -->
				</div>
			</div>
		</div>
	</div>






	<div id="fot-nav">
		<nav>
			<ul class="list">
                <li class="active">
                    <a href="index.html">
                        <i class="icon iconfont">&#xe61d;</i>
                        <span>首页</span>
                    </a>
                </li>
                <li>
                    <a href="scenic.html">
                        <i class="icon iconfont">&#xe61e;</i>
                        <span>景区介绍</span>
                    </a>
                </li>
                <li>
                    <a href="pict.html">
                        <i class="icon iconfont">&#xe636;</i>
                        <span>相册</span>
                    </a>
                </li>
                <li>
                    <a href="travels.html">
                        <i class="icon iconfont">&#xe616;</i>
                        <span>游记</span>
                    </a>
                </li>
                <li>
                    <a href="equipment.html">
                        <i class="icon iconfont">&#xe617;</i>
                        <span>旅游装备</span>
                    </a>
                </li>
                <li>
                    <a href="Personal.html">
                        <i class="icon iconfont">&#xe60b;</i>
                        <span>个人中心</span>
                    </a>
                </li>
            </ul>
		</nav>
	</div>
</div>
<script src="js/swiper.min.js"></script>
<script src="js/script.js"></script>
<script>
	
	var swiper = new Swiper('.cont-top .swiper-container', {
      spaceBetween: 30,
      effect: 'fade',
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      loop : true,
      autoplay:true,
    });



	var swiper = new Swiper('.main-content .swiper-container', {
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
    });
    var spTxt = document.querySelectorAll(".main-content .swiper-pagination-bullet");
    spTxt[0].innerHTML = "热门游记"
    spTxt[1].innerHTML = "最新发布"
</script>
</body>
</html>